<template>
  <div class="login-panel">
    <!-- 头部区域 -->
    <h2 class="title">后台管理系统</h2>

    <!-- tab 栏区域 -->
    <el-tabs type="border-card" stretch v-model="activeName">
      <!-- 1. 账号登陆的 tab -->
      <el-tab-pane name="account">
        <!-- 具名插槽为了加入 icon  -->
        <template #label>
          <div class="label">
            <el-icon><UserFilled /></el-icon>
            <span class="text">帐号登录</span>
          </div>
        </template>
        <PanelAccount ref="accountRef" />
      </el-tab-pane>

      <!-- 手机登录的tab -->
      <el-tab-pane name="phone">
        <template #label>
          <div class="label">
            <el-icon><Cellphone /></el-icon>
            <span class="text">手机登录</span>
          </div>
        </template>
        <PanelPhone />
      </el-tab-pane>
    </el-tabs>

    <!-- 底部区域 -->
    <div class="pwd-control">
      <el-checkbox v-model="isRememberPwd" label="记住密码" size="large" class="rem-pwd" />
      <el-link type="primary" href="#" class="forget-pwd">忘记密码</el-link>
    </div>
    <el-button type="primary" class="login-btn" size="large" @click="loginHandle"
      >立即登录</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import PanelAccount from './panel-account.vue'
import PanelPhone from './panel-phone.vue'
import { localCache } from '@/utils/cahe'

// 注意一下关于记住密码后，记住密码框的变化，这个值可以放在本地存储中，便于记录
const isRememberPwd = ref<boolean>(localCache.getCache('isRememberPwd') ?? false)
// watch 监听 isRememberPwd 的变化，存入本地缓存
watch(isRememberPwd, (newValue) => {
  localCache.setCache('isRememberPwd', newValue)
})

const activeName = ref<string>('account')
// 不获取类型的话 就没有相应的代码提示 就没有ts校验的方法
// PanelAccount 是一个组件实例，先是获取实例的类型，然后获取该组件的返回值类型
const accountRef = ref<InstanceType<typeof PanelAccount>>()
// console.log(accountRef)

// 在父组件中调用子组件的方法来实现登录功能
function loginHandle() {
  if (activeName.value === 'account') {
    // 1. 获取子组件实例
    accountRef.value?.loginAction(isRememberPwd.value)
    // 2. 调用子组件的方法
    console.log('账号登录了')
  } else {
    console.log('手机登录了')
  }
}
</script>

<style lang="less" scoped>
.login-panel {
  width: 320px;
  height: 300px;
  // background-color: #fff;
  text-align: center;
  opacity: 0.8;
  h2 {
    margin-bottom: 20px;
    color: #fff;
    text-shadow: #333 1px 1px;
  }
  .pwd-control {
    display: flex;
    justify-content: space-between;
    .el-checkbox {
      --el-checkbox-font-size: 19px;
      font-weight: 700;
    }
    .el-link {
      font-weight: 700;
    }
    .forget-pwd {
      .el-link__inner {
        font-weight: 700;
      }
    }
  }

  .login-btn {
    width: 100%;
    padding: 2px;
  }
  .label {
    display: flex;
    align-items: center;
    .text {
      margin-left: 3px;
    }
  }
}
</style>
